/**
 *首页
 */
import React, {useEffect, useState} from 'react';
import {Image, View, StyleSheet, StatusBar, Text} from 'react-native';
import {
  windowHeight,
  windowStatusBarHeight,
  windowWidth,
} from '../../utils/commonUtils';
import {Carousel, Icon} from '@ant-design/react-native';

import api from '../../api/api';

export const Home = ({navigation}) => {
  const [banner, setbanner] = useState([]);
  //获取数据
  useEffect(() => {
    api.getBanner().then(e => {
      console.log(e.banners);
      setbanner(e.banners);
    });
  }, []);

  return (
    <View style={styles.homebox}>
      <StatusBar
        translucent={true}
        backgroundColor="transparent"
        barStyle={'dark-content'}
      />
      {/*导航栏*/}
      <View style={styles.homenavbar}>
        <Icon name="align-left" size="md" color={'#383838'} />
        {/*搜索框*/}
        <View style={styles.homesearch}>
          <View style={{marginLeft: 10, marginRight: 5}}>
            <Icon name="search" size="md" color={'#383838'} />
          </View>
          <Text>搜索你想找的音乐</Text>
        </View>
        <Icon name="customer-service" size="md" color={'#383838'} />
      </View>
      {/*轮播图*/}
      <View style={styles.homebanner}>
        <Carousel
          autoplay
          autoplayInterval={5000}
          infinite={true}
          style={styles.homebanner_content}
          dotStyle={{backgroundColor: '#C4C4C4', width: 8, height: 8}}
          dotActiveStyle={{backgroundColor: '#FFFFFF', width: 16, height: 8}}>
          {banner.map(item => {
            console.log('qq', item);
            return (
              <View>
                <Image
                  source={{uri: item.imageUrl}}
                  style={{width: '100%', height: '100%', borderRadius: 15}}
                />
              </View>
            );
          })}
        </Carousel>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  homebox: {
    width: windowWidth,
    height: windowHeight + windowStatusBarHeight,
    marginTop: windowStatusBarHeight,
  },
  homenavbar: {
    width: '100%',
    height: 50,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  homesearch: {
    width: 293,
    height: 30,
    borderRadius: 20,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#E5E5E5',
  },
  homebanner: {
    width: '100%',
    height: 171,
    marginTop: 28,
    display: 'flex',
    alignItems: 'center',
  },
  homebanner_content: {
    width: 400,
    height: 171,
    borderRadius: 15,
  },
});
